<template>
	<view class="gjl-view">
		<u-navbar :back-text="query.edit==1?'编辑收货地址':'新增配送地址'"
			:back-text-style="{fontSize: '32rpx',color: '#000',fontWeight:'bold'}" back-icon-color="#000"
			back-icon-size="28" title=" ">
			<!-- <view slot="right">
				<view class="navbar-right" @click="del">
					删除
				</view>
			</view> -->
		</u-navbar>
		<view class="content">
			<view class="card-box">
				<view class="card-title">
					{{query.edit==1?'编辑收货地址':'新增收货地址'}}
				</view>
				<view class="form-box">
					<u-form :model="form" label-width="150" :error-type="errorType"
						:label-style="{fontSize: '24rpx',color: '#000000',fontWeight:'bold'}" ref="uForm">
						<u-form-item label="收货人" prop="name">
							<u-input v-model="form.name" placeholder="请输入姓名" />
						</u-form-item>
						<u-form-item label="手机号码" prop="phone">
							<u-input v-model="form.phone" placeholder="请输入11位手机号码" />
						</u-form-item>
						<view class="cover" @click="show=true">
							<u-form-item label="选择地区" prop="address" right-icon="arrow-right" :right-icon-style="{color: '#000000',fontSize: '20'}">
								<u-input disabled v-model="regionText" placeholder="请选择省、市、县"/>
							</u-form-item>
						</view>
						<u-form-item label="详细地址" prop="detailAddress" :label-style="{fontSize: '24rpx',color: '#000000',fontWeight:'bold',alignSelf: 'flex-start'}">
							<u-input type="textarea" height="20" v-model="form.detailAddress" placeholder="请输入街道门牌信息" />
							<view class="posi-box" slot="right" @click="getLocation">
								<u-icon name="location" color="#47C7FF" size="30" custom-prefix="custom-icon" style="line-height: 33rpx;"></u-icon>
								<view class="text">定位</view>
							</view>
						</u-form-item>
					</u-form>
				</view>
				<view class="btn-box">
					<view class="btn" v-if="query.edit == 1" @click="del">
						删除
					</view>
					<view class="btn submit-btn" @click="submit">
						保存
					</view>
				</view>
			</view>
		</view>
		<u-picker mode="region" v-model="show" @confirm="regionConfirm" :default-region="defaultRegion"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				errorType: ['message', 'border-bottom'],
				form: {
					name: '',
					phone: '',
					address: '',
					detailAddress: ''
				},
				regionText: '',
				defaultRegion: [],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					phone: [{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '请选择地区',
						trigger: ['blur', 'change']
					}],
					detailAddress: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					}]
				},
				query: {}
			}
		},
		onLoad(query) {
			this.query = query
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 选择位置
			getLocation(){
				let that = this;
				uni.chooseLocation({
				    success: function (res) {
						that.form.detailAddress =  res.address + res.name;
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
				    }
				});
			},
			del() {
				uni.showModal({
					title: '提示',
					content: '确认删除当前地址?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateBack({
								delta: 1
							});
						} else if (res.cancel) {
							
						}
					}
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {

					} else {

					}
				});
			},
			regionConfirm(e) {
				const {
					area
				} = e;
				const {
					value
				} = area;
				this.form.address = value;
				let arr = [];
				for (let i in e) {
					arr.push(e[i].label)
				};
				this.defaultRegion = arr;
				this.regionText = arr.join('、');
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
		background-color: #F5F5F5;
	}
</style>
<style scoped lang="scss">
	.gjl-view {
		padding-top: 20rpx;

		.navbar-right {
			font-size: 24rpx;
			font-weight: 400;
			color: #000000;
		}

		.content {
			padding: 0 30rpx;

			.card-box {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 40rpx;

				.card-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					text-align: center;
					font-weight: bold;
				}
				.btn-box{
					display: flex;
					align-items: center;
					.btn + .btn{
						margin-left: 20rpx;
					}
					.btn{
						flex: 1;
						margin-top: 80rpx;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 80rpx;
						text-align: center;
						border-radius: 40px;
						color: #000000;
						border: 1px solid #707070;
					}
					.btn.submit-btn {
						background: linear-gradient(90deg, #FF9B4E 0%, #FF7540 100%);
						color: #FFFFFF;
						border: none;
					}
				}
				

				.form-box {
					text-align: right;
					.posi-box{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.text{
							margin-top: 6rpx;
							font-size: $h6;
							line-height: $h6;
							color: $assist-color-1;
						}
					}
					/deep/ .u-form-item{
						padding: 0;
						line-height: 80rpx;
					}
					/deep/ .u-input{
						align-items: center;
					}
					/deep/ .u-input input{
						color: $h6-color;
						font-size: $h5;
						text-align: right !important;
					}
					/deep/ .u-input .u-input__textarea{
						color: $h6-color;
						font-size: $h5;
					}
				}
			}
		}
	}
</style>
